<template>
  <div class="leaveitem">
    <el-row :gutter="10" class="leaveitem-row">
      <el-col :xs="20" :lg="20" :md="20" :sm="20" :offset="2">
        <div class="leaveitem-d">
          <el-form ref="issueItem" :model="reception" class="leaveitem-inp" :rules="rules">
            <el-form-item prop="commentMessage">
              <el-input ref="textRef" v-model="reception.commentMessage" :rows="5" type="textarea" :placeholder="comText"></el-input>
            </el-form-item>
            <div class="leaveitem-div">
              <el-form-item prop="gender">
                <el-input v-model="reception.gender" class="leaveitem-inn" placeholder="姓名"></el-input>
              </el-form-item>
              <el-form-item class="leaveitem-inna" prop="mailbox">
                <el-input v-model="reception.mailbox" placeholder="邮箱"></el-input>
              </el-form-item>
              <el-button @click="issue" class="leaveitem-but" type="danger" plain>发表评论</el-button>
            </div>
          </el-form>
          <div class="leaveitem-divi">
            <h3 class="leaveitem-h3">共{{observerMessage.length}}条留言</h3>
            <p v-if="observerMessage.length===0" class="leaveitem-p">还没有留言，快来留言吧～！</p>
            <div v-else class="observer">
              <div v-for="(item,index) in observerMessage" :key="index" class="observer-item">
                <img src="../../../assets/img/swiper/7.jpg" alt />
                <div class="observer-div">
                  <div class="observer-p">
                    <h3 class="observer-h3">{{item.nickname}}</h3>
                    <p class="observer-i">{{item.create_time}}</p>
                  </div>
                  <div>
                    <p>{{item.content}}</p>
                  </div>
                  <div class="reply">
                    <a @click="parentReply(item)" href="javascript:;">回复</a>
                  </div>
                  <div v-for="(itemi,index) in item.children" :key="index" class="observer-itemi">
                    <img src="../../../assets/img/swiper/7.jpg" alt />
                    <div class="observer-div">
                      <div class="observer-p">
                        <h3 class="observer-h3">{{itemi.nickname}}</h3>
                        <i class="observer-ii">@{{itemi.reply_user}}</i>
                        <p class="observer-i">{{itemi.create_time}}</p>
                      </div>
                      <div>
                        <p>{{itemi.content}}</p>
                      </div>
                      <div class="reply">
                        <a @click="parentReplys(item,itemi)" href="javascript:;">回复</a>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { LeaveItem, gainItem } from '../../../network/LeaveItem'
export default {
  name: 'comment',
  data() {
    return {
      //数据验证
      rules: {
        commentMessage: [
          { required: true, message: '请输入评论内容', trigger: 'blur' },
          { min: 3, message: '长度最少不能低于三个字符', trigger: 'blur' }
        ],
        mailbox: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
        ],
        gender: [
          { required: true, message: '请输入昵称', trigger: 'blur' },
          { min: 1, max: 10, message: '昵称最大为10个字符', trigger: 'blur' }
        ]
      },
      //评论提交数据统计结合
      subCommentForm: {
        //当前博客的id
        articleId: 0,
        //当前评论的id
        commentId: 0,
        replyName: ''
      },
      //评论表单
      reception: {
        commentMessage: '', //评论信息
        gender: '', //性名
        mailbox: '' //邮箱
      },
      //获取父类评论
      observerMessage: [],
      comText: '请输入留言信息'
    }
  },
  created() {
    gainItem(this.$route.params.id).then(res => {
      this.observerMessage = res.data
    })
  },
  mounted() {
    this.subCommentForm.articleId = this.$route.params.id
  },
  methods: {
    //回复
    parentReply(item) {
      this.subCommentForm.commentId = item.id
      this.subCommentForm.replyName = item.nickname
      //点击回复获取input焦点
      const dc = document.documentElement
      this.dcScrollTop = dc.scrollTop
      dc.scrollTop = dc.scrollHeight
      this.$refs.textRef.focus()
      this.comText = `@${item.nickname}`
    }, //回复
    parentReplys(item, itemi) {
      this.subCommentForm.commentId = item.id
      this.subCommentForm.replyName = itemi.nickname
      //点击回复获取input焦点
      const dc = document.documentElement
      this.dcScrollTop = dc.scrollTop
      dc.scrollTop = dc.scrollHeight
      this.$refs.textRef.focus()
      this.comText = `@${item.nickname}`
    },

    issue() {
      let subComment = {
        sid: this.subCommentForm.articleId,
        pid: this.subCommentForm.commentId,
        reply_user: this.subCommentForm.replyName,
        email: this.reception.mailbox,
        content: this.reception.commentMessage,
        nickname: this.reception.gender
      }
      this.$refs.issueItem.validate(valid => {
        if (valid) {
          LeaveItem(subComment).then(res => {
            if (res.code === 200) {
              this.$message({
                message: '评论成功',
                type: 'success'
              })
              gainItem(this.$route.params.id).then(res => {
                this.observerMessage = res.data
              })
            }
            this.reception.commentMessage = ''
            this.reception.gender = ''
            this.reception.mailbox = ''
            this.subCommentForm.commentId = 0
            this.subCommentForm.replyName = ''
            this.comText = '请输入留言信息'
          })
        } else {
          console.log(2)
        }
      })
    }
  }
}
</script>

<style>
.leaveitem {
  background-color: #dce2da;
}
.leaveitem-row {
  margin: 0 auto;
}
.leaveitem-d {
  overflow: hidden;
  margin-top: 30px;
  background-color: #f5f6f4;
  margin-bottom: 30px;
  border-radius: 15px;
  box-shadow: 0px 0px 10px 10px rgba(100, 100, 100, 0.5);
}
.leaveitem-inp {
  display: block;
  width: 80%;
  margin: 0 auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
.leaveitem-youx {
  width: 25%;
  margin-left: 20px;
}
.leaveitem-div {
  display: flex;
  width: 80%;

  margin-bottom: 25px;
}
.leaveitem-divi {
  margin: 0 auto;
  width: 80%;
  margin-bottom: 25px;
}
.leaveitem-inn {
  width: 100%;
}
.leaveitem-inna {
  margin-left: 20px;
}
.leaveitem-h3 {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 20px;
}
.leaveitem-but {
  width: 100px;
  height: 100%;
  margin-left: 40px;
}
.leaveitem-p {
  text-indent: 2em;
}
.observer {
  overflow: hidden;
  width: 100%;
  background: #f5f6f4;
}
.observer-item img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.observer-item {
  display: flex;
  margin-bottom: 20px;
  padding-bottom: 5px;
  border-bottom: 1px solid rgba(100, 100, 100, 0.1);
}
.observer-itemi {
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;
}
.observer-div {
  margin-left: 15px;
}
.observer-p {
  display: flex;
  margin-bottom: 8px;
  font-size: 14px;
}
.observer-h3 {
  font-size: 16px;
  font-weight: 700;
  margin-right: 15px;
}
.observer-ii {
  margin-left: -15px;
  padding: 0 10px;
  color: #07a2ea;
}
.reply {
  padding-top: 10px;
}
</style>